<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin: 10px 0px;
        }

        span {
            color: white;
            padding: 8px;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }

        .green {
            background-color: green;
        }
    </style>
</head>

<body>
    <h3>prepend()方法前追加内容</h3>
    <h3>prependTo()方法前追加内容</h3>
    <h3>append()方法后追加内容</h3>
    <h3>appendTo()方法后追加内容</h3>

    <span class="red">爱豆</span>
    <span class="blue">偶像</span>
    <div class="green">
        <span>影帝</span>
    </div>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        let p = "<p>这是一个段落</p>"
        console.log(p)
        console.log($(p))

        //添加元素
        //创建元素
        let span = "<span>狼</span>";
        //得到指定元素,并在指定元素最前面追加内容
        $(".green").prepend(span);
        let span2 = "<span>狗</span>"
        $(span2).prependTo($(".green"))

        let span3 = "<span>猫</span>";
        //得到指定元素,并在指定元素最前面追加内容
        $(".green").append(span3);
        let span4 = "<span>虎</span>"
        $(span4).appendTo($(".green"))
        //将已存在内容追加到指定元素
        $(".green").append($(".red"))
        //同级追加
        let sp1 = "<span class='pink'>演员</span>"
        let sp2 = "<span class='yellow'>歌手</span>"
        $(".blue").before(sp1);
        $(".blue").before(sp2);


    </script>
</body>

</html>